<template>
	<el-button type="primary">按钮</el-button>
</template>

<script setup lang="ts">
	import { hColgroup } from 'element-plus/es/components/table/src/h-helper.mjs';
	import {
		clickButton5,
		clickButton6
	} from '../common/common';

	//自定义
	type Person = {
		name : string,
		age : number,
		sex : string,
		address ?: string,//可选属性
	}

	let name : string = '张三';
	let name1 : String = '李四';
	let name2 = new String('王五');
	console.log(name, name1, name2);
	//字符串长度
	console.log(name.length);
	//字符串根据指定符号，分割成数组
	console.log(name.split(","));

	//字符串根据指定符号，转换成字符串
	let nameArray = ['张三', '李四'];
	console.log(nameArray.join(""));
	console.log(nameArray.join(","));

	let name3 = 'asdfga';
	//查找指定字符串首次出现的位置的下标，没有返回-1
	console.log(name3.indexOf('d'));
	//最后一次出现的位置的下标，没有返回-1
	console.log(name3.lastIndexOf('d'));

	//截取字符串，从指定位置开始
	console.log(name3.substring(name3.indexOf('d')));
	let index = name3.indexOf('d');
	//截取字符串，从指定位置开始，到指定位置结束(不包含)
	console.log(name3.substring(index, index + 2));
	console.log(name3.slice(index, index + 2));
	//如果值为负数，从尾部截取
	console.log(name3.slice(-2, -1));
	//字符串拼接，并返回新的字符串
	console.log(name3.concat("13", 'a', 'd'), name3);
	//替换指定字符串内容
	console.log(name3.replace("a", "o"));
	//正则表达式替换匹配的字符串
	console.log(name3.replace(/a/g, "o"));
	//字符串转换大写
	console.log(name3.toUpperCase());
	//字符串转换小写
	console.log(name3.toLowerCase());

	let nameArray1 : string[];
	let nameArray2 = ['展示', '张三'];
	let nameArray3 : string[] = new Array();
	nameArray3.push("往往", "小民", "菜鸟");
	console.log(nameArray3.length);
	//合并数组
	console.log(nameArray2.concat(nameArray3));
	//查询字符串所在的位置
	nameArray2.push("小民")
	console.log(nameArray3);
	console.log(nameArray3.indexOf("菜鸟"), "菜鸟");
	console.log(nameArray3.lastIndexOf("菜鸟"));

	//删除最后一个
	let name4 = nameArray3.pop();
	console.log(name4);
	//删除第一个
	let name5 = nameArray3.shift();
	console.log(name5);
	//添加值的数组的开头
	let length = nameArray3.unshift("11");
	//反转数组
	console.log(nameArray3);
	console.log(nameArray3.reverse());
	//截取数组内容，返回新数组
	console.log(nameArray3.slice(1));

	let nameArray4 : Person[] = [{
		name: "王五",
		age: 19,
		sex: '男',
		// address:''
	},
	{
		name: "小红",
		age: 15,
		sex: '女',
		// address:''
	}]
	//过滤找到符合的条件值
	let nameArray5 = nameArray4.filter(item => item.age > 15);

	let nameArray6 = nameArray5.map(item => {
		item.address = "中国";
		return item;
	});

	let name6 = nameArray4.map(item => item.name).join(",");
	console.log(name6);
	//reverse：反转数组的元素顺序。
	let name7 = nameArray4.reverse().map(item => item.name).join(",");
	console.log(name7);
	//reduce()；将数组元素计算
	let sumAge = nameArray4.map(item => item.age).reduce((age : number, age1 : number, index : number, array : number[]) => {
		console.log(age + age1);
		return age + age1;
	})
	console.log(sumAge);
	//过滤找到符合条件的值，返回布尔类型结果
	let result = nameArray4.some(item => item.age > 15);
	console.log(result);

	let paramMap = new Map();
	//添加/修改
	paramMap.set("name", "张三");
	paramMap.set("age", 20);
	console.log(paramMap);
	//获取
	let name8 = paramMap.get("name");
	console.log(name8);
	//删除
	let name9 = paramMap.delete("name");
	console.log(name9);
	//判断key是否存在
	console.log(paramMap.has("age"));
	paramMap.forEach((value, key, map) => {
		console.log(value, key, map);
		if (typeof (value) == 'string') {
			console.log("string");
		} else if (value instanceof Date) {
			console.log("Date");
		}
	})
	//keys() 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
	for (let key of paramMap.keys()) {
		console.log(key, paramMap.get(key));
	}

	//元组
	let nameType = ['占山', '', 10, 10, true];
	let nameType1 : [string, string, number, number, boolean] = ['占山', '', 10, 10, true];
	interface Person1 {
		name : string,
		age : number,
		speak : () => void,
		eat : (food : string) => string
	}
	interface Person1 {
		//可选参数，以及联合类型
		sex ?: string | number,
	}
	type PersonType = {
		name : string,
		age : number,
		speak : () => void,
		eat : (food : string) => string
	}
	let student : Person1 = {
		name: "张三",
		age: 20,
		speak: () => { },
		eat: (food : string) => {
			return food;
		}
	}
	let student1 : PersonType = {
		name: "张三",
		age: 20,
		speak: () => { },
		eat: (food : string) => {
			return food;
		}
	}
	console.log(student, student1);
	//类型不能重复
	interface Person2 {
		sex : string,
		info : Person1
	}

	console.log(student.sex?.toString());// ? 可能为空或不空
	//console.log(student.sex|.toString());// | 不能为空
	console.log((student.sex ?? 'a').toString());
	console.log((student.sex || 'a').toString());

	function clickButton<T>(param : T){
		console.log(param);
	}
	clickButton<string>("2");
</script>

<style>
</style>